<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抖音-记录美好生活</title>
    <link rel="shortcut icon" href="./asset/favicon.ico" type="image/x-icon" />
    <link
      rel="stylesheet"
      href="https://oss.duyiedu.com/douyin/icon/iconfont.css"
    />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/aside.css" />
    <link rel="stylesheet" href="./css/main-header.css" />
    <link rel="stylesheet" href="./css/main-content.css" />
  </head>
  <body>
    <div class="container">
      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 为了避免类样式名称冲突，所有类样式加上前缀 aside -->
        <div class="aside-logo">
          <a href=""><h1>抖音</h1></a>
        </div>
        <!-- 侧边栏的主区域 -->
        <div class="aside-main">
          <!-- 菜单 -->
          <div class="aside-menu">
            <a href="" class="active">
              <i class="iconfont icon-home"></i>
              <span>首页</span>
            </a>
            <a href="">
              <i class="iconfont icon-tubiaozhizuomoban-"></i>
              <span>推荐</span>
            </a>
            <a href="">
              <i class="iconfont icon-jiaguanzhuren"></i>
              <span>关注</span>
            </a>
            <a href="">
              <i class="iconfont icon-zhibo"></i>
              <span>直播</span>
            </a>
            <a href="">
              <i class="iconfont icon-redian"></i>
              <span>热点</span>
            </a>
            <div class="aside-split"></div>
            <a href="">
              <i class="iconfont icon-xiaolian"></i>
              <span>娱乐</span>
            </a>
            <a href="">
              <i class="iconfont icon-shuqian"></i>
              <span>知识</span>
            </a>
            <a href="">
              <i class="iconfont icon-pc-dongman"></i>
              <span>二次元</span>
            </a>
            <a href="">
              <i class="iconfont icon-youxi"></i>
              <span>游戏</span>
            </a>
            <a href="">
              <i class="iconfont icon-meishi"></i>
              <span>美食</span>
            </a>
            <a href="">
              <i class="iconfont icon-ball"></i>
              <span>体育</span>
            </a>
            <a href="">
              <i class="iconfont icon-1_yifu"></i>
              <span>时尚</span>
            </a>
            <a href="">
              <i class="iconfont icon-yinle"></i>
              <span>音乐</span>
            </a>
          </div>
          <!-- 页脚 -->
          <div class="aside-footer">
            <!-- <div class="aside-section">
              <p>2022 © 抖音</p>
              <p>
                <a href="">京ICP备16016397号-3</a>
              </p>
              <p>
                <a href="">
                  <img src="./asset/emblem.png" alt="" />
                  京公网安备 11000002002046号
                </a>
              </p>
              <p>
                <a href="">广播电视节目制作经营许可证</a>
              </p>
              <p>
                <a href="">京B2-20170846</a>
              </p>
              <p>
                <a href="">网络文化许可证-京网文-（2016）2282-264号</a>
              </p>
            </div> -->
            <div class="aside-section">
              <p>
                <a href="">网络谣言曝光台</a>
              </p>
              <p>
                <a href="">网上有害信息举报</a>
              </p>
              <p>违法和不良信息举报 400-140-2108</p>
              <p>青少年守护专线 400-9922-556</p>
              <p>网络内容从业人员违法违规行为举报 feedback@douyin.com</p>
            </div>
            <div class="aside-links">
              <a href="">广告投放</a>
              <a href="">用户服务协议</a>
              <a href="">隐私政策</a>
              <a href="">账号找回</a>
              <a href="">联系我们</a>
              <a href="">加入我们</a>
              <a href="">营业执照</a>
              <a href="">友情链接</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 主区域 -->
      <div class="main">
        <!-- 头部 -->
        <div class="main-header">
          <!-- 搜索区域 -->
          <form class="header-search">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" placeholder="搜索你感兴趣的内容 " />
            <button>搜索</button>
          </form>
          <!-- 功能区域 -->
          <div class="main-function">
            <div class="main-function-item">
              <a href="">关于抖音</a>
              <div class="main-function-sub">
                <a href="">抖音开放平台</a>
                <a href="">认证与合作</a>
                <a href="">广告投放</a>
                <a href="">关于我们</a>
                <a href="">抖音电商</a>
                <a href="">透明度报告</a>
              </div>
            </div>
            <div class="main-function-item">
              <a href="">创作者服务</a>
            </div>
            <div class="main-function-pub main-function-item">
              <a href="">
                <i class="iconfont icon-jiahao"></i>
                <span>发布视频</span>
              </a>
            </div>
            <button class="main-function-login main-function-item">登录</button>
          </div>
        </div>
        <!-- 主内容区域 -->
        <div class="main-content">
        </div>
      </div>
    </div>
    <script src="./js/helper.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
